<template>
 	<div class="modifyPass">
		<el-row>
			<el-col :span="12">
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
					<el-form-item label="原密码：" prop="password">
						<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="设置新密码：" prop="newPassword">
						<el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="确认新密码：" prop="ornewPassword">
						<el-input type="password" v-model="ruleForm.ornewPassword" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
						<el-button @click="handleClose('ruleForm')">取消</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
import { removeToken } from '@/utils/auth'
// api
import {
  setPassword
} from '@/api/setting'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String
  },
  data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.password !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
    var validateNewPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'));
			} else {
				if (this.ruleForm.password !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validateOrNewPass = (rule, value, callback) => {
      console.log("value",value)
      console.log("this.ruleForm.newPassword",this.ruleForm.newPassword)
			if (value === '') {
				callback(new Error('请再次输入新密码'));
			} else if (value != this.ruleForm.newPassword) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
    
    return {
      data: {},
			ruleForm: {
				password: '',
				newPassword: '',
        ornewPassword: ''
			},
			rules: {
          password: [
            { required: true,validator: validatePass, message: '请输入旧密码',trigger: 'blur' }
          ],
          newPassword: [
            { required: true,validator: validateNewPass,message: '请输入新密码', trigger: 'blur' }
          ],
          ornewPassword: [
            { required: true,validator: validateOrNewPass,trigger: 'blur' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {

	},
  methods: {
		//取消
    handleClose(formName) {
			this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
     //修改密码
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = {
            password: this.ruleForm.password,
            newPassword: this.ruleForm.newPassword
          }
          console.log('params',params)
          setPassword(params).then(res => {
            this.handleSuccess("修改成功")
            setTimeout(()=>{
              removeToken()
              window.location.reload()
            },1000)
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.modifyPass ::v-deep .el-form-item__content{
	width: 300px;
}
.modifyPass ::v-deep .el-row{
	background: #fff;
	padding: 20px;
}
.modifyPass{
	padding: 20px 20px 40px 20px;
	border-radius: 4px;
	.box{
		width: 400px;
	}
}
</style>
